//获取样式的兼容写法
function getStyle(oEle, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(oEle, null)[attr];
    }
    return oEle.currentStyle[attr];
}

//json 任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等
//JSON 键值对是用来保存 JS 对象的一种方式
function animate(oEle, json, callback) { //callback 回调函数(就是把函数体当做另一个函数的参数)
    //消除之前旳定时器
    clearInterval(oEle.timer);
    //开启新的定时器
    oEle.timer = setInterval(() => {
        var target; //目标的值
        var attr; //属性
        var current;//当前的值
        var flag = true;//假设都到了

        //用for..in把属性和值遍历出来
        for (var key in json) {
            //opcity值为0-1 所以要加个判断
            if (key == "opacity") {
                attr = key;
                target = json[key] * 100;//目标的值放大100倍 防止步长的时候取整
                current = getStyle(oEle, attr) * 100;
            } else {
              
                target = parseInt(json[key]);//{left:"400px"}
                attr = key;
                current = parseInt(getStyle(oEle, attr));
            }
      
        //步长
        var step = (target - current) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        //新的位置=当前位置+步长
        if (key == "opacity") {
            oEle.style.opacity = (current + step) / 100;
        }else if(key=="zIndex"){
            oEle.style.zIndex=target;
        }
         else {
            oEle.style[attr] = current + step + "px";
        }
        //判断  如果当前值和目标值不相等,说明还没没到指定地方
        if (target != current) {
            flag = false;//状态改为false
        }
    }
        if (flag == true) {
            clearInterval(oEle.timer);//都到了就完成了
            //判断是不是函数,是就调用
            if (typeof (callback) == "function") {
                callback();
            }
        }
    }, 10)
}
